{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}

<!---头部特色css  开始-->
{block name="titleStyle"}
<style>
canvas{
	display: block;
	margin:50px auto;
	box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
}
</style>
{/block}
<!---头部特色css  结束-->

<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>

<canvas id="chess" width="450px" height="450px"></canvas>

<!-- -->
<pre>
	<h5>html</h5>
	&lt;canvas id="chess" width="450px" height="450px"&gt;&lt;/canvas&gt;
	<br/>
	<h5>css</h5>
    canvas{
		display: block;
		margin:50px auto;
		box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9; /*阴影*/
	}
	<h5>javascript</h5>
	var chess = document.getElementById('chess');
/*画图必须 */
var chess = document.getElementById('chess');
/*画图必须 */
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

/**画圆   圆心坐标200 300 半径 100 起始弧度 0  终止弧度2*Math.PI (360度)  */
context.arc(200,300,100,0,2*Math.PI);
/*放射状 渐变 圆心200 300 半径 50 第二个圆心 200 280 半径 20**/
var gradient = context.createRadialGradient(200,300,50,200,280,20);
/* 0 第一个圆 #0a0a0a 浅灰色*/
gradient.addColorStop(0,"#0a0a0a");
/* 第二个圆 #0a0a0a 亮灰色*/
gradient.addColorStop(1,"#636766");
/**用gradient 填充style 剩下的部分填为黑色 */
context.fillStyle = gradient;
/*画图 并填充**/
context.fill();



</pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
var chess = document.getElementById('chess');
/*画图必须 */
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

/**画圆   圆心坐标200 300 半径 100 起始弧度 0  终止弧度2*Math.PI (360度)  */
context.arc(200,300,100,0,2*Math.PI);
var gradient = context.createRadialGradient(200,300,50,200,280,20);
/* 0 第一个圆 #0a0a0a 浅灰色*/
gradient.addColorStop(0,"#0a0a0a");
/* 第二个圆 #0a0a0a 亮灰色*/
gradient.addColorStop(1,"#636766");
/**用gradient 填充style 剩下的部分填为黑色 */
context.fillStyle = gradient;
context.fill();

</script> {/block}